<template>
	<view class="content" :style="'background: url('+ z_imgPath + 'card_bg.png'+ ') no-repeat 0 0 / 100% auto;'">
		<view class="head">
			<view class="status_bar" :style="'height:'+ statusBarHeight +'px;'"></view>
			<view class="header_title">
				<view @click="back()">
					<!-- <image :src="z_imgPath + 'back.png'"></image> -->返回
				</view>
				<view class="hang1">详情</view>
			</view>
		</view>
		<view class="content_title">
			<view class="content_title_price hang1" :style="'background: url('+ z_imgPath + 'img1.png'+ ') no-repeat 0 0 / 100% auto;'">{{detailInfo.title}}  <text>¥{{detailInfo.show_price}}</text></view>
			<view class="content_title_tips hang1" :style="'background: url('+ z_imgPath + 'img2.png'+ ') no-repeat 0 0 / 100% auto;'">{{detailInfo.card_notice}}</view>
		</view>
		<view class="content_main">
			<view class="content_main_zhu animated fadeInUp" v-if=" !isHebing" >
				<image class="image1 imgStyle" :src="z_imgPath+'zhu1.png'" :animation="animationData1"></image>
				<image class="image2" :src="z_imgPath+'zhu2.png'" :animation="animationData1"></image>
				<image class="image3" :src="z_imgPath+'zhu3.png'" :animation="animationData2"></image>
				<image class="image4" :src="z_imgPath+'zhu4.png'" :animation="animationData"></image>
				<image class="imageUrl" :src="'https://hdyfs.languowangluo.cn'+detailInfo.imgurl_detail" :animation="animationData2" mode="aspectFill"></image>
			</view>
			<view v-if="isHebing" >
				<image :src="z_imgPath+'hebing.png'"  class="image5" :animation="animationData4"></image>
			</view>
			<image class="content_main_zuo" :src="z_imgPath+'zuo1.png'"></image>
		</view>
		<view class="content_lt">
			<image :src="z_imgPath+'img3.png'" @click="gotoPage('tujian?id='+detailInfo.id)"></image>
			<image :src="z_imgPath+'img4.png'" @click="$refs.shuoming.open()"></image>
			<image :src="z_imgPath+'img5.png'" @click="gotoPage('/pages/user/myCaDetail?caId='+detailInfo.id)"></image>
			<image :src="z_imgPath+'img6.png'" @click="getjilv"></image>
			<image :src="z_imgPath+'img7.png'" @click="tokefu"></image>
		</view>
		<view class="content_bom">
			<!-- @click="order_money('left_count')" -->
			<image :src="z_imgPath+'bom1.png'" class="bom1" @click="order_money('left_count')"></image>
			<image :src="z_imgPath+'bom2.png'" class="bom2" @click="order_money('center_count')"></image>
			<image :src="z_imgPath+'bom3.png'" class="bom3" @click="order_money('right_count')"></image>
			<view class="shang1 shangStyle">必出{{detailInfo.card_set.center_shang_name}}</view>
			<view class="shang2 shangStyle">必出{{detailInfo.card_set.right_shang_name}}</view>
		</view>
		<!-- 确认订单 -->
		<uni-popup ref="dingdan" type="bottom">
			<view class="ckjl animated fadeInUp">
				<view class="ckjl_title">
					<image :src="z_imgPath + 'order_p.png'"></image>
					<view class="ca" @click="$refs.dingdan.close()">×</view>
				</view>
				<view class="ckjl_title_con1" :style="'background: url('+ z_imgPath + 'title_con1_bg.png'+ ') no-repeat 0 0 / 100% 100%;height:320rpx'">
					<view class="order_pic" v-if="pay_news.goods">
						<view style="width: 100%;">
							<view style="font-size: 35rpx;">{{detailInfo.title}}</view>
							<view style="margin-top: 40rpx;">类型：1包</view>
							<view style="margin-top: 10rpx;width: 100%;">
								<text>单价：<text style="color: #FEFF00;">{{detailInfo.price}}元</text></text>
								<text>×{{pay_news.goods.first_num}}</text>
							</view>
						</view>
					</view>
					<view class="order_num">
						<view style="font-size: 28rpx;" v-if="pay_news.goods">数量:{{pay_news.goods.prize_num}}张</view>
						<view>
							小计:{{goods.box_type==5?'':'￥'}}<text>{{pay_news.order_total}}{{goods.box_type==5?'积分':''}}</text>
						</view>
					</view>
				</view>
				<view class="order_title_con1" v-if="goods.box_type!=1" :style="'background: url('+ z_imgPath + 'title_con2_bg.png'+ ') no-repeat 0 0 / 100% 100%;height:240rpx'">
					<view style="font-size: 28rpx;margin-bottom: 10rpx;">支付方式</view>
					<!-- 一番赏 -->
					<template>
						<view class="fangshi" @click="change_yuan_index(1)" style="padding-bottom: 15rpx;">
							<view class="flex_center">
								<image :src="z_imgPath+'bi.png'" style="width: 30rpx;height:30rpx;"></image>
								<view>
									使用余额抵扣￥<text>{{pay_news.use_integral}}</text>（剩余：<text>{{pay_news.integral}}</text>）
								</view>
							</view>
							<image :src="z_imgPath + 'yuan'+ (bi?'_sel':'') +'.png'"></image>
						</view>
						<view class="fangshi" @click="change_yuan_index(2)" style="border-top: 1px solid rgba(255, 255, 255, .2);padding-top: 15rpx;">
							<view class="flex_center">
								<image :src="z_imgPath + 'yue.png'" style="width: 33rpx;height: 28rpx;"></image>
								<view>
									使用余额抵扣￥<text>{{pay_news.use_money}}</text>（剩余：<text>{{pay_news.money}}</text>）
								</view>
							</view>
							<image :src="z_imgPath + 'yuan'+ (yue?'_sel':'') +'.png'"></image>
						</view>
					</template>
		
				</view>
				<view style="font-size: 24rpx;margin:20rpx 10rpx;">
					下单购买即表示同意
					<text style="color: #FEFF00;" @click="gotoPage('/pages/guize/guize?type=2')">《用户服务协议条款》</text>
				</view>
				<view class="order_title_btn">
					<view>
						总计:￥<text
							style="font-size: 40rpx;color:#FEFF00;">{{pay_news.order_total}}</text>
					</view>
					<view class="zhifu" @click="pay()" :style="'background: url('+ z_imgPath + 'zhifu.png'+ ') no-repeat 0 0 / 100% 100%;'"></view>
				</view>
			</view>
		</uni-popup>
		<!-- 奖品弹窗 -->
		<uni-popup ref="jp_show" type="center" mask-background-color="rgba(0,0,0,0.8)">
			<view class="pop_jp">
				<image class="pop_gongxi" :src="z_imgPath + 'jp_img.png'"></image>
				<view class="jp_title animated zoomIn">
					<view class="jp_title_1">
						<view class="jp_list" v-for="(v,i) in jp_arr" :key='i'>
							<view class="list_img">
								<image :src="'https://hdyfs.languowangluo.cn'+v.goodslist_imgurl"></image>
								<view>{{v.goodslist_title}}</view>
							</view>
							<!-- <view class="hang1">{{v.goodslist_title}}</view> -->
						</view>
					</view>
				</view>
				<image class="dhbtmbox" :src="z_imgPath + 'dong_bottom.png'" style="margin-top: 35rpx;"></image>
				<view class="jp_btn">
					<image @click="tosangdai()" class="animated fadeInLeft" :src="z_imgPath + 'qsd.png'"></image>
					<image @click="$refs.jp_show.close()" class="animated fadeInRight" :src="z_imgPath + 'jixu.png'"></image>
				</view>
			</view>
		</uni-popup>
		<!-- 抽卡记录 -->
		<uni-popup ref="jilv" type="bottom" :isMaskClick="false">
			<view class="ckjl animated fadeInUp">
				<view class="ckjl_title">
					<image :src="z_imgPath + 'ckjl.png'"></image>
					<view class="ca" @click="$refs.jilv.close(),page_num=1,mixTotal=0">×</view>
				</view>
				<view class="jilv_title">
					<view v-for="(item,index) in shang_cate" :key="index" @click="change_shang_id(item.id)" :class="shang_id==item.id?'selActive':''">
						{{item.title}}
					</view>
				</view>
				<!-- -->
				<scroll-view scroll-y="true" @scrolltolower="getjilv" style="height:900rpx;">
					<view v-for="(item,index) in jl_Arr" :key="index" class="jilv_list">
						<view>
							<view class="flex_center ">
								<image :src="item.user_info.headimg"></image>
								<view class="hang1" style="max-width: 260rpx;">{{item.user_info.nickname}}
								</view>
							</view>
							<view style="font-size: 24rpx;">{{item.addtime}}</view>
						</view>
						<view>
							<view class="flex_center">
								<image :src="item.goodslist_imgurl" style="border-radius: 8rpx;"></image>
								<view class="hang1" style="max-width: 300rpx;">{{item.goodslist_title}}</view>
							</view>
							<view style="font-size: 26rpx;">X{{item.prize_num}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 购买说明 -->
		<uni-popup ref="shuoming" type="center">
			<view class="popGm" :style="'background: url('+ z_imgPath + 'gmsm_p.png'+ ') no-repeat 0 0 / 100% 100%;'">
				<view class="pop_con">
					<scroll-view scroll-y="true" style="max-height: 630rpx;">
						<view v-html="news"></view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				z_imgPath: this.$z_img1 + 'chouka/',
				shang_cate:[],
				shang_id:0,
				bi: true, // 1:是否币支付,
				yue: true, // 2:余额支付
				pay_news: {}, // 订单信息
				goods: {},
				animationData: {},
				animationData1: {},
				animationData2: {},
				animationData4: {},
				isHebing:false,
				detailId:'',
				detailInfo:{},
				page_num:1,
				mixTotal: 0, // 统计信息总页数
				type:'',
				// 支付失效
				pay_status: false,
				jp_arr:[],
				jl_Arr:[],
				news:''
			}
		},
		onLoad(e) {
			this.detailId=e.goods_id
		},
		onShow() {
			this.getDeatil()	
		},
		onShareAppMessage(e) {
			let that = this;
			return {
				title: "简单模玩" + that.detailInfo.title + '卡册',
				imageUrl: 'https://hdyfs.languowangluo.cn'+that.detailInfo.imgurl_detail,
				path: "/pages/DrawCard/cardDetail?goods_id=" + that.detailId + '&pid=' + uni.getStorageSync(
					'userinfo').ID
			};
		},
		methods: {
			tosangdai() {
				uni.setStorageSync('page', this.$mp.page.route)
				uni.switchTab({
					url: '../sangdai/sangdai'
				})
			},
			getDeatil(){
				let that = this;
				that.req({
					url: 'card_goods_detail',
					data:{
						goods_id:that.detailId
					},
					success(res) {
						if (res.status == 1) {
							that.detailInfo=res.data
						}
					}
				})
				that.req({
					url: 'card_level',
					success(res) {
						if (res.status == 1) {
							that.shang_cate=res.data
							if(res.data.length>0){
								that.shang_id=res.data[0].id
							}
						}
					}
				})
				that.req({
					url: 'card_rule',
					success(res) {
						if (res.status == 1) {
							that.news=res.data
						}
					}
				})
			},
			tokefu() {
				// #ifdef  MP-WEIXIN  
				wx.openCustomerServiceChat({
					extInfo: {
						url: uni.getStorageSync('wx_link') //客服地址链接
					},
					corpId: uni.getStorageSync('corpid'), //必须和你小程序上的一致
					success(res) {
						console.log(res, 1)
					},
					fail(res) {
						console.log(res, 2)
					},
				})
				// #endif
			},
			order_money(type) {
				let that = this;
				that.type=type;
				that.req({
					url: 'buy_money',
					data: {
						card_id: that.detailId,
						type: that.type,
						use_money_is: that.yue ? 1 : 2,
						use_integral_is: that.bi ? 1 : 2
					},
					success(res) {
						if (res.status == 1) {
							that.pay_news = res.data
							that.$refs.dingdan.open()
						}
					}
				})
			},
			pay() {
				let that = this;
				let info = {
					card_id: that.detailId,
					type: that.type,
					use_money_is: that.yue ? 1 : 2,
					use_integral_is: that.bi ? 1 : 2
				}
				if (that.pay_status) {
					return
				}
				if (info) {
					that.pay_status = true
					that.req({
						url: 'card_goods_buy',
						data: info,
						success(res) {
							if (res.status == 1) {
								that.jp_arr = []
								if (res.data.status == 1) {
									that.info = {}
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.data.res.timeStamp,
										nonceStr: res.data.res.nonceStr,
										package: res.data.res.package,
										signType: 'MD5',
										paySign: res.data.res.paySign,
										complete(ress) {
											if (ress.errMsg == 'requestPayment:fail cancel') {
												uni.showToast({
													title: '取消支付',
													icon: 'loading',
													duration: 1000
												})
											}
											if (ress.errMsg == 'requestPayment:ok') {
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													duration: 1000
												})
												setTimeout(() => {
													that.$refs.dingdan.close()
													that.req({
														url: 'prize_log',
														data: {
															order_num: res.data.order_num
														},
														success(aa) {
															if (aa.status == 1) {
																// that.jp_news = aa.data.user_info
																that.jp_arr = aa.data
																that.dakai();
																// that.$refs.jp_show.open()
																// that.loadData(1)
															}
														}
													})
												}, 1500)
											}
										}
									})
								} else {
									that.info = {}
									uni.showToast({
										title: '支付成功',
										icon: 'success',
										duration: 1000
									})
									that.$refs.dingdan.close()
									that.req({
										url: 'prize_log',
										data: {
											order_num: res.data.order_num
										},
										success(aa) {
											if (aa.status == 1) {
												
												// that.jp_news = aa.data.user_info
												that.jp_arr = aa.data
												setTimeout(() => {
													that.dakai();
												},300)
												console.log(that.jp_arr)
												// that.loadData(1)
											}
										}
									})
								}
							}
							if (res.status == 0) {
			
							}
						},
						complete() {
							that.pay_status = false
						}
			
					})
			
				}
			},
			// 中赏记录
			change_shang_id(e) {
				this.shang_id = e
				this.page_num = 1
				this.jl_Arr = []
				this.getjilv()
			},
			getjilv() {
				let that = this;
				console.log(that.page_num, this.mixTotal)
				if (this.page_num !== 1 && this.page_num > this.mixTotal) {
					return
				}
				that.req({
					url: 'card_reward_log',
					Loading: true,
					data: {
						page: that.page_num,
						category_id:that.shang_id ,
						card_id: that.detailId
					},
					success(res) {
						if (res.status == 1) {
							// that.shang_cate = res.data.category;
							that.mixTotal = res.data.last_page
							if (that.page_num === 1) {
								that.jl_Arr = res.data.data;
							} else {
								that.jl_Arr = that.jl_Arr.concat(res.data.data)
							}
							console.log(that.jl_Arr)
							that.page_num += 1
							that.$refs.jilv.open()
			
						}
					}
				})
			},
			back() {
				var pages = getCurrentPages();
				if (pages.length == 1 && pages[0].route == "pages/DrawCard/cardDetail") {
					uni.redirectTo({
						url: '/pages/DrawCard/index'
					})
				} else {
					uni.navigateBack()
				}
			
			},
			dakai(){
				//下移
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				})
				animation.translateY(-90).step(),
				this.animationData = animation.export()
				
				 //上移
				 var animation1 = uni.createAnimation({
				 	duration: 400,
				 	timingFunction: 'ease'
				 })
				 animation1.translateY(90).step(),
				  this.animationData1 = animation1.export()
				  // 遮罩变小
				  var animation2 = uni.createAnimation({
				  	duration: 400,
				  	timingFunction: 'ease'
				  })
				  animation2.opacity(0).step(),
				  this.animationData2 = animation2.export()
				   // return;
				   setTimeout(() => {
					   //合并后转圈
					   var that=this;
					   this.isHebing=true;
					   var animation4 = uni.createAnimation({
					   	duration:  1500,
					   	timingFunction: 'ease-in'
					   })
					   setTimeout(() => {
					   	animation4.rotate(2160).step(),
					   	 this.animationData4 = animation4.export()
						 	
					   },300)
					   //动画结束，奖品弹窗
					   setTimeout(() => {
					   that.$refs.jp_show.open()
						   setTimeout(() => {
							this.isHebing=false;
							animation.translateY(0).step()
							this.animationData = animation.export()
							animation1.translateY(0).step()
							 this.animationData1 = animation1.export()
							animation2.opacity(1).step(),
							 this.animationData2 = animation2.export()
							animation4.rotate(0).step({duration:  0})//恢复转圈
							this.animationData4 = animation4.export()
						   },300)
					   },1600)
				   	// this.yincang();
				   },300)
			},
			yincang(){
				var that=this;
				this.isHebing=true;
				var animation4 = uni.createAnimation({
					duration:  1500,
					timingFunction: 'ease-in'
				})
				setTimeout(() => {
					animation4.rotate(1800).step(),
					 this.animationData4 = animation4.export()
				},300)
				setTimeout(() => {
					that.$refs.jp_show.open()
					this.isHebing=false;
					animation4.rotate(0).step({duration:  0})
					this.animationData4 = animation4.export()
				},1600)
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding-top: calc(var(--status-bar-height) + 140rpx);
		color: #fff;
		.head {
			position: fixed;
			top: 0;
			z-index: 20;
			.header_title {
				height: 70rpx;
				line-height: 70rpx;
				width: 100%;
				box-sizing: border-box;
				font-weight: bold;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				box-sizing: border-box;
				>view:nth-of-type(1) {
					display: flex;
					align-items: center;
				}
				>view:nth-of-type(2) {
					width: 520rpx;
					text-align: center;
					/* margin: auto; */
				}
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		&_title{
			margin: 0 39rpx 37rpx;
			color: #fff;
			&_price{
				width: 672rpx;
				height: 68rpx;
				font-size: 36rpx;
				line-height: 68rpx;
				text-align: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				text{
					font-size: 32rpx;
				}
			}
			&_tips{
				width: 601rpx;
				height: 47rpx;
				margin: 18rpx auto 0;
				font-size: 22rpx;
				line-height: 47rpx;
				text-align: center;
			}
		}
		&_main{
			position: relative;
			margin: 0 auto;
			
			&_zhu{
				text-align: center;
				width: 750rpx;
				position: relative;
				z-index: 2;
				.imgStyle{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					// z-index: 2;
				}
				.image1{
					width: 480rpx;
					height: 287rpx;
				}
				.image2{
					width: 165rpx;
					height:165rpx;
					position: absolute;
					top: 133rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 5;
				}
				.image3{
					width: 478rpx;
					height:721rpx;
					position: absolute;
					top: 88rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 2;
				}
				.image4{
					width: 480rpx;
					height: 286rpx;
					position: absolute;
					top: 600rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 1;
				}
				.imageUrl{
					width: 219rpx;
					height: 407rpx;
					position: absolute;
					top: 264rpx;
					left: 0;
					right: 0;
					margin: 0 auto;
					z-index: 3;
				}
			}
			.image5{
				width: 507rpx;
				height: 507rpx;
				position: absolute;
				top:191rpx;
				left: 0;
				right: 0;
				margin: 0 auto;
				z-index: 1;
			}
			&_zuo{
				width: 750rpx;
				height: 370rpx;
				position: absolute;
				top: 613rpx;
			}
		}
		&_lt{
			position: fixed;
			right: 10rpx;
			bottom: 300rpx;
			z-index: 6;
			image{
				width: 114rpx;
				height: 114rpx;
				display: block;
				margin-bottom: 18rpx;
			}
		}
		&_bom{
			.bom1{
				width: 286rpx;
				height: 132rpx;
				position: fixed;
				bottom: 30rpx;
				z-index: 5;
			}
			.bom2{
				width: 329rpx;
				height: 132rpx;
				position: fixed;
				bottom: 73rpx;
				left: 210rpx;
				z-index: 5;
			}
			.bom3{
				width: 286rpx;
				height: 132rpx;
				position: fixed;
				bottom: 30rpx;
				left: 460rpx;
				z-index: 5;
			}
			.shangStyle{
				background: rgba(17,17,17,0.8);
				// border-style:inset;
				// border: 6rpx solid #19A353;
				font-size: 22rpx;
				// -webkit-text-stroke: 1rpx #19C761;
				// text-stroke: 1rpx #19C761;
				color: #fff;
				padding:8rpx 15rpx;
				border-radius: 10rpx;
				box-shadow: inset 0 0 20rpx #19A353;
			}
			.shang1{
				position: fixed;
				bottom: 210rpx;
				left: 310rpx;
				z-index: 5;
			}
			.shang2{
				position: fixed;
				bottom: 166rpx;
				right: 52rpx;
				z-index: 5;
			}
		}
		.popGm{
			width: 562rpx;
			height: 896rpx;
			padding-top: 150rpx;
			box-sizing: border-box;
		}
		.ckjl{
			width: 750rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 30rpx 30rpx 0px 0px;
			border-top: 5rpx solid #35ED85;
			border-bottom: none;
			position: absolute;
			bottom: 0;
			padding: 10rpx 30rpx 50rpx;
			box-sizing: border-box;
			color: #FFFFFF;
			&_title {
				font-size: 50rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #FFFFFF;
				position: relative;
				text-align: right;
				>image {
					width: 172rpx;
					height: 37rpx;
					position: absolute;
					left: 30rpx;
					top:20rpx;
				}
			}
			.jilv_title {
				font-size: 30rpx;
				color: #F7F7F7;
				display: flex;
				align-items: center;
				width: 100%;
				margin: 20rpx auto;
				overflow-x: scroll;
				>view{
					background: #444444;
					border-radius: 10rpx;
					padding: 15rpx 25rpx;
					margin-right: 20rpx;
				}
				.selActive{
					background: linear-gradient(0deg, #1AC762 0%, #35ED85 100%);
					border-radius: 10rpx;
					color: #222;
				}
			}
			.jilv_list{
				width: 690rpx;
				height: 160rpx;
				border: 2rpx solid #C5FADC;
				margin: 20rpx auto;
				padding: 12rpx 20rpx 24rpx 21rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				>view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #F7F7F7;
				}
				image:nth-of-type(1) {
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}
				image:nth-of-type(2) {
					width: 69rpx;
					height: 69rpx;
					border-radius:10rpx;
					margin-right: 15rpx;
				}
			}
			.order_pic {
				display: flex;
				>view:nth-of-type(2) {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					padding-top: 14rpx;
					box-sizing: border-box;
				}
				>view>view:nth-of-type(3) {
					display: flex;
					justify-content: space-between;
					width: 410rpx;
				}
			}
			.order_num {
				display: flex;
				justify-content: space-between;
				border-top: 1rpx solid #333333;
				margin-top: 20rpx;
				padding: 20rpx 0;
				>view:nth-of-type(2) {
					font-size: 24rpx;
				}
				text {
					font-size: 32rpx;
					color:#FEFF00;
				}
			}
			.order_title_con1{
				width: 690rpx;
				margin-top: 28rpx;
				padding: 20rpx 30rpx 10rpx;
				box-sizing: border-box;
				
				.fangshi {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					line-height: 60rpx;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
					}
					>view>image {
						margin-right: 20rpx;
					}
					text {
						color: #FEFF00;
					}
				}
				
			}
		}
		.order_title_btn {
			width: 690rpx;
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;
			font-size: 24rpx;
			box-sizing: border-box;
			.zhifu {
				width: 332rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.pop_gongxi {
			width: 750rpx;
			height: 197rpx;
			display: block;
			margin-bottom: 30rpx;
		}
		.jp_title {
			box-sizing: border-box;
			padding: 0rpx 50rpx;
			.jp_title_1 {
				width: 100%;
				max-height: 680rpx;
				overflow-y: scroll;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				margin: auto;
				color: #FFFFFF;
				padding-bottom: 15rpx;
				>view:nth-child(3n-1) {
					margin: 20rpx 30rpx 0 30rpx;
				}
				.jp_list {
					font-size: 24rpx;
					width: 190rpx;
					margin-top: 20rpx;
					position: relative;
					.list_img {
						width: 190rpx;
						height: 190rpx;
						border-radius: 10rpx;
						position: relative;
						border: 1px solid #C5FADC;
						>image {
							width: 188rpx;
							height: 188rpx;
							border-radius: 10rpx;
						}
						>view {
							font-size: 24rpx;
							position: absolute;
							background: #1AC762;
							bottom: 0;
							left: 0;
							border-radius: 0 10rpx 0 0;
							text-align: left;
							padding: 0 20rpx 0 12rpx;
							box-sizing: border-box;
							color: #222;
						}
					}
				}
			}
		}
		.jp_btn {
			margin-top: 125rpx;
			display: flex;
			justify-content: space-around;
			>image{
				width: 292rpx;
				height: 70rpx;
			}
		}
		.dhbtmbox{
			width: 750rpx;
			height: 32rpx;
		}
		.ckjl_title_con1{
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}
		.pop_con{
			height: 630rpx;
			margin: auto;
			padding: 2rpx 36rpx 0;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #FFFFFF;
			box-sizing: border-box;
			overflow-y: scroll;
		}
	}
</style>
